<template>
  <div>
    <div class="chart-period-setting">
      <el-tooltip
        class="chart-tooltip"
        effect="dark"
        content="设置要求的考核时长，可选择为“N1天”、“N2天”…等多个时长，例如统计在30天、90天内发生第2次维修，则设置为30天、90天。图表根据其分别统计数据点，并分别显示为多条折线。"
        placement="bottom"
      >
        <i class="iconfont icon-jieshishuoming1"></i>
      </el-tooltip>
      <el-button @click="showDialog">重复考核时长</el-button>
      <chart-download :chart-type="chartType"/>
    </div>

    <!-- 关单周期设置弹出框 -->
    <el-dialog
      title="设置周期"
      :visible.sync="dialogVisible"
      width="648px"
      label-position="top"
      class="close-dialog"
    >
      <div>
        <el-form
          :model="closeForm"
          ref="closeFormRef"
          
          label-position="top"
        >
          <el-form-item label="设置报表计算具体分段周期">
            <div
              v-for="(item, index) in closeForm.repeatedSearchQueries"
              :key="index"
              class="el-form-item-line"
            >
              <span>{{ index + 1 }}.</span>
              <el-input
                maxlength="4"
                v-model="item.searchIndex"
                v-only-number="{ max: 9999, min: 0, noPoint: true }"
              ></el-input>
              <span>{{ unit }}</span>
              <i
                v-if="closeForm.repeatedSearchQueries.length !== 1"
                class="el-icon-remove"
                @click="reduceList(index)"
              ></i>
              <i
                v-if="index + 1 === closeForm.repeatedSearchQueries.length && index < 9"
                class="el-icon-circle-plus"
                @click="addList"
              ></i>
            </div>
            <div>注：4字符以内，最多10条。</div>
          </el-form-item>
        </el-form>
      </div>

      <span slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible = false">关闭</el-button>
        <el-button @click="save" type="primary">保存 </el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
import { ref, computed } from 'vue';
import Platform from '@src/util/platform.ts';
import _ from 'lodash';
import ChartDownload from './ChartDownload';
export default {
  name: 'chart-repeat-maintenance-setting',
  props: {
    chartOption: {
      type: Object,
    },
    chartType: {
      type: String,
      default: ''
    },
  },
  emit: ['fetchChartData'],
  setup(props, { emit }) {
    const dialogVisible = ref(false);

    const initList = [
      {
        searchIndex: 30
      },
      {
        searchIndex: 90
      }
    ];

    const closeForm = ref({
      // 周期统计维度(0:分钟 1:小时 2:天)
      repeatedSearchQueries: initList,
    });

    const unit = ref('天')
    const showDialog = () => {
      dialogVisible.value = true

      if (Object.keys(props.chartOption).length > 0) {
        const repeatedSearchQueries = _.cloneDeep(props.chartOption.repeatedSearchQueries)
        closeForm.value = {
          repeatedSearchQueries
        }
      } else {
        closeForm.value = {
          repeatedSearchQueries: initList,
        };
      }
    };

    const changeRadio = () => {
      closeForm.value.repeatedSearchQueries = [{}];
    };

    const reduceList = index => {
      const arr = closeForm.value.repeatedSearchQueries;
      closeForm.value.repeatedSearchQueries = [
        ...arr.slice(0, index),
        ...arr.slice(index + 1, arr.length),
      ];
    };

    const addList = () => {
      // if (closeForm.value.repeatedSearchQueries.length > 9) return Platform.alert('最多添加10条')
      closeForm.value.repeatedSearchQueries.push({});
    }

    // Todo 暂且先这样校验
    const validate = () => {
      let valid = true;
      closeForm.value.repeatedSearchQueries.forEach(item => {
        if (
          !(
            (item.searchIndex || item.searchIndex === 0)
          )
        ) {
          valid = false;
        }
      });

      return valid;
    };

    // 校验是否重复
    const repeatValidate = ()=>{
      let bool = false;
      closeForm.value.repeatedSearchQueries.forEach((item)=>{
        const arr = closeForm.value.repeatedSearchQueries.filter(x => x.searchIndex == item.searchIndex);
        if(arr.length > 1) return bool = true;
      })
      return bool;
    }

    const save = () => {
      const valid = validate();
      if (valid) {
        if(repeatValidate()){
          return Platform.alert('周期值不可重复');
        }

        dialogVisible.value = false;
        const newValue = {
          ...props.chartOption,
          ...closeForm.value
        }
        emit('fetchChartData', newValue);
      } else {
        return Platform.alert('输入框不能为空');
      }
    };

    const refresh = () => {
      closeForm.value = {
        repeatedSearchQueries: initList,
      };
    };

    return {
      dialogVisible,
      closeForm,
      unit,
      showDialog,
      changeRadio,
      reduceList,
      addList,
      save,
      refresh,
    };
  },
  components: {
    [ChartDownload.name]: ChartDownload,
  }
};
</script>

<style lang="scss" scoped>
.chart-period-setting {
  display: flex;
  justify-content: flex-end;
  align-items: center;
  i {
    color: #afb5b3;
  }

  .el-button {
    width: 120px;
    margin-left: 10px;
    margin-right: 2%;
  }
}
.close-dialog {
  .plink_radio_button_div {
    width: 60px;
  }

  .el-form-item-line {
    display: flex;
    align-items: center;
    margin-bottom: 5px;

    .el-input {
      width: 80px;
      margin: 0 10px;
    }

    i {
      margin: 0 -5px 0 10px;
      font-size: 18px;
      cursor: pointer;
      color: #f56c6c;
    }

    .el-icon-circle-plus {
      color: $color-primary-light-6;
      margin-left: 10px;
    }
  }
}
</style>
